<template>
	<view class="evaluated">
		<view class="list">
			<block v-for="(item,i) in list" :key="i">
				<view class="item">
					<image class="avatar" :src="item.avatar" mode=""></image>
					<view class="comment_info">
						<view class="comment_t">
							<view class="uer_info">
								<view class="">
									<view class="uer_name">{{item.nickname}}</view>
									<view class="score">
										<uni-rate disabled :value="item.productScore" :size="14"
											disabled-color="#F17816" color="#E6E6E6" />
									</view>
								</view>
							</view>
							<view class="time">{{item.createTime}}</view>
						</view>
						<view class="comment_content">
							<image src="../../../static/mine/pingjiabiaoqian.png" mode=""></image>
							<text>{{item.comment}}</text>
						</view>
						<view class="comment_goods" @click="isJump(item)">
							<image :src="item.image" mode=""></image>
							<view class="goods_title">{{item.storeName}}</view>
							<uni-icons type="right" color="#999999" size="16"></uni-icons>
						</view>
						<view class="del_btn">
							<view class="" @click="onDelComment(item.id)">
								<image src="../../../static/mine/shanchu.png" mode=""></image>
								<text>删除评论</text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view style="text-align: center;" v-if="list.length==0">
				<image style="width: 200rpx;height: 200rpx;" src="../../../static/nodata.png"></image>
				<view style="color: #999;text-align: center;">暂无数据</view>
			</view>
			<view style="text-align: center;color: #999;font-size: 24rpx;" v-if="noMoreData&&list.length!=0">
				没有更多啦
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				lastPage: 1,
				noMoreData: false,
				list: [],
			};
		},
		onLoad() {
			this.getRatedList()
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page += 1
				this.getRatedList()
			} else {
				this.noMoreData = true
			}
		},
		methods: {
			async onDelComment(id) {
				uni.showModal({
					content: '确认删除该条评论数据吗?',
					success: (res) => {
						if (res.confirm) {
							this.onDel(id)
						}
					}
				});

			},
			async onDel(id) {
				console.log(id, "id----")
				const res = await this.$api.get('order/evaDel', {
					id
				});
				console.log(res, "已评价列表")
				this.showToast(res.message)
				if (res.code == 200) {
					setTimeout(() => {
						this.page = 1
						this.getRatedList()
					}, 2000)
				}
			},
			getTag(tag) {
				return tag.split(',')
			},
			async getRatedList() {
				const res = await this.$api.get('order/rated', {
					page: this.page,
					limit: 10,
					search: ''
				});
				console.log(res, "已评价列表")
				if (res.code == 200) {
					const {
						list,
						totalPage
					} = res.data
					if (this.page == 1) {
						this.list = list || [];
						this.lastPage = totalPage || 1;
						// console.log(this.list, 'this.list')
					} else {
						this.list.push(...list);
					}
					this.page != 1 && list.length == 0 ? this.noMoreData = true : this.noMoreData = false
				}

			},
			isJump(item) {
				if(item.isInvalid) {
					this.$to(`/pages/index/gameDetail/gameDetail?id=${item.productId}`)
				}else {
					return uni.showToast({
						icon: 'none',
						title: '商品已下架，去看看别的吧~'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.evaluated {
		padding: 20rpx 0;

		.list {
			.item {
				width: 100%;
				padding: 18rpx 36rpx 26rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				margin-bottom: 14rpx;

				.avatar {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.comment_info {
					flex: 1;

					.comment_t {
						display: flex;
						justify-content: space-between;
						margin-bottom: 30rpx;

						.uer_info {
							display: flex;
							align-items: center;

							>view {
								height: 66rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.uer_name {
									font-size: 26rpx;
								}
							}
						}

						.time {
							font-size: 26rpx;
							color: #B3B3B3;
						}
					}

					.comment_content {
						font-size: 20rpx;
						margin-bottom: 32rpx;

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}
					}

					.comment_goods {
						width: 100%;
						height: 114rpx;
						background-color: #F7F7F7;
						padding: 16rpx 26rpx 16rpx 20rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 6rpx;
						}

						.goods_title {
							height: 80rpx;
							flex: 1;
							font-size: 24rpx;
							margin: 0 16rpx;
						}
					}

					.del_btn {
						display: flex;
						justify-content: flex-end;

						>view {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #B3B3B3;

							image {
								width: 23rpx;
								height: 26rpx;
								margin-right: 10rpx;
							}
						}
					}
				}

			}
		}
	}
</style>